<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8"/>
    <meta name="format-detection" content="telephone = no"/>
    <meta name="msapplication-tap-highlight" content="no"/>
    <meta name="viewport"
          content="user-scalable = no, initial-scale = 1, maximum-scale = 1, minimum-scale = 1, width = device-width"/>

    <link rel="stylesheet" type="text/css" href="../css/common.css"/>
    <link rel="stylesheet" type="text/css" href="../css/footer.css"/>
    <link rel="stylesheet" type="text/css" href="../css/header2.css"/>
    <link rel="stylesheet" type="text/css" href="../css/detail.css"/>


    <link rel="stylesheet" href="../css/main/index.css"/>
    <script type="text/javascript" src="../js/jquery-3.2.1.min.js"></script>
    <link rel="stylesheet" type="text/css" href="../css/main/kxian.css"/>

    <title>详情</title>
</head>

<body>
<div style="width: 100%;background: #1d1e23;">
    <input type="hidden" id="code" value="${code}">
		<#include "fragment/header2.html">
    <div class="section01 w100" style="font-size:14px !important;">
        <div class="sec_top hidden w100" style="padding: 0px 0px 0px 0px;">
            <div class="top_child1 w40 fl">
                <div class="colorGreen f35 line-2" id="new_price">${pro_data.last_price}</div>
                <div class="colorGreen f12"><span class="inline_block mr10"
                                                  id="change_val">${pro_data.change_count}</span><span
                        id="change_point">${pro_data.change_count}%</span></div>
            </div>
            <div class="top_child2 w60 fl hidden color999 f12">
                <div class="w50 fl">
                    <div>最高<span class="inline_block ml10 colorGreen" id="high">${pro_data.high}</span></div>
                    <div class="mt6">最低<span class="inline_block ml10 colorGreen" id="low">${pro_data.low}</span></div>
                    <div class="mt6">波动<span class="inline_block ml10 color_ef"
                                             id="change_val">${pro_data.change_count}</span></div>
                </div>
                <div class="w50 fl">
                    <div>今开<span class="inline_block ml10 colorGreen" id="open">${pro_data.open}</span></div>
                    <div class="mt6">昨收<span class="inline_block ml10 color_ef" id="close">${pro_data.close}</span>
                    </div>
                    <div class="mt6">涨速<span class="inline_block ml10 color_ef" id="change_v">21</span></div>
                </div>
            </div>
        </div>
    </div>

    <div class="mm">
        <div class="mm1">
            <span class="f10 cgre"><div class="fl">36101</div><div class="bk-r fl f10">买入</div></span>
            <span class="f10 cred fr"><div class="fr">36101</div><div class="fl bk-g">卖出</div></span>
        </div>
    </div>

    <div class="inp tc">
        <label id="aa">
            <input type="hidden" id="aa" value="${pro_data.BV}" onchange="wang();"/>
        ${pro_data.BV}
        </label>
        交易量
        <label id="bb">
            <input type="hidden" id="bb" value="${pro_data.SV}" onchange="wang();"/>
        ${pro_data.SV}
        </label>
    </div>
    <div class="num">
        <div>
            <div id="num1">
                50.00%
            </div>
        </div>
        <div>
            <div id="num2">
                50.00%
            </div>
        </div>
    </div>
</div>

<div class="trade-chart">
    <div class="chart-type">
        <span class="trend">分时</span>
        <span class="k" data-type="min,1">1分K</span>
        <span class="k" data-type="min,5">5分K</span>
        <span class="k" data-type="min,30">30分K</span>
        <span class="k" data-type="min,60">60分K</span>
        <span class="k" data-type="day">日K</span>
    </div>

    <div class="chart-container">
        <span class="switch"></span>

        <canvas class="chart"></canvas>
        <canvas class="detail"></canvas>
    </div>

    <div class="detail-container">
        <div class="data-detail trend">
            <span class="time" data-title="时间：">--</span>
            <span class="price" data-title="价格：">--</span>
            <span class="avgPrice" data-title="均价：">--</span>
            <span class="volume" data-title="成交量：">--</span>
        </div>
        <div class="data-detail k">
            <span class="time" data-title="时间：">--</span>
            <span class="open-price" data-title="开盘价：">--</span>
            <span class="high-price" data-title="最高价：">--</span>
            <span class="low-price" data-title="最低价：">--</span>
            <span class="close-price" data-title="收盘价：">--</span>
            <span class="volume" data-title="成交量：">--</span>
            <span class="amount" data-title="涨跌：">--</span>
            <span class="percentage" data-title="涨跌幅：">--</span>
        </div>
    </div>
</div>

<div class="detail_list borderbox posia" style="margin-bottom:50px;">
    <div class="detail_type f14 mt10 mb15">
        <span class="color999 guize" id="mingxi">明细</span>
        <span class="color999 ml10 c_fff" id="guize">规则</span>
    </div>
    <div id="mingxi1">
        <div class="detail_title hidden f12 color999 mb15">
            <div class="w40 fl">时间</div>
            <div class="w30 fl tr">价位</div>
            <div class="w30 fl tc">现手</div>
        </div>
        <div class="detail_title hidden f12 mb10">
            <div class="w40 fl color_ef">16:02:42</div>
            <div class="w30 fl tr">7582</div>
            <div class="w30 fl tc">55</div>
        </div>
        <div class="detail_title hidden f12 mb10">
            <div class="w40 fl color_ef">14:33:55</div>
            <div class="w30 fl tr">3341</div>
            <div class="w30 fl tc">42</div>
        </div>
        <div class="detail_title hidden f12 mb10">
            <div class="w40 fl color_ef">07:25:35</div>
            <div class="w30 fl tr">9823</div>
            <div class="w30 fl tc">61</div>
        </div>
        <div class="detail_title hidden f12 mb10">
            <div class="w40 fl color_ef">10:16:19</div>
            <div class="w30 fl tr">4261</div>
            <div class="w30 fl tc">87</div>
        </div>
        <div class="detail_title hidden f12 mb10">
            <div class="w40 fl color_ef">09:31:56</div>
            <div class="w30 fl tr">5971</div>
            <div class="w30 fl tc">72</div>
        </div>
        <div class="detail_title hidden f12 mb10">
            <div class="w40 fl color_ef">06:15:53</div>
            <div class="w30 fl tr">1762</div>
            <div class="w30 fl tc">89</div>
        </div>
    </div>

    <div id="guize1" style="display:none;">

        <div class="tableguize f14 fir_span">
                <span class="w25 inline_block tc ta_span">货币单位</span>
            <span class="w70 inline_block tc">${rule.monetaryunit}</span>
        </div>

        <div class="tableguize f14">
                <span class="w25 inline_block tc ta_span">交易单位</span>
            <span class="w70 inline_block tc">${rule.tradingunit}</span>
        </div>


        <div class="tableguize f14">
                <span class="w25 inline_block tc ta_span">交易所</span>
            <span class="w70 inline_block tc">${rule.exchange}</span>
        </div>

        <div class="tableguize f14">
                <span class="w25 inline_block tc ta_span">最小波动</span>
            <span class="w70 inline_block tc">${rule.minimumfluctuation}</span>
        </div>

        <div class="tableguize f14">
                <span class="w25 inline_block tc ta_span">浮动盈亏</span>
            <span class="w70 inline_block tc">${rule.Fluctuatingprofitandloss}</span>
        </div>

        <div class="tableguize f14">
                <span class="w25 inline_block tc ta_span">履约保证金</span>
            <span class="w70 inline_block tc">${rule.performancebond}人民币/手</span>
        </div>

        <div class="tableguize1 f14">
                <span class="w25 inline_block tc ta_span">交易时间</span>
            <span class="w65 inline_block tc" id="xis">${rule.tradingtime}</span>
        </div>

        <div class="tableguize2 f14">
                <span class="w25 inline_block tc ta_span">清仓时间</span>
            <span class="w70 inline_block tc">${rule.clearingtime}</span>
        </div>

        <div class="tableguize f14">
                <span class="w25 inline_block tc ta_span">综合交易费</span>
            <span class="w70 inline_block tc">${rule.comprehensivefee}人民币/手</span>
        </div>

        <div class="tableguize2 f14">
                <span class="w25 inline_block tc ta_span">汇率</span>
            <span class="w70 inline_block tc" id="xias">${rule.exchangerate}</span>
        </div>

        <div class="que">
            <div class="que_title f15"><i class="inline_block ora fl"></i>美元如何兑换成人民币？</div>
            <div class="que_con f12">
                用户交易涉及到美元兑换人民币将使用固定汇率7进行兑换即1美元=7人民币。（实际兑换汇率波动到一定的点位会进行调整将另行公布），用户持仓结算后的盈亏将自动根据上述汇率换成人民币。
            </div>
        </div>
        <div class="que">
            <div class="que_title f15"><i class="inline_block ora fl"></i>什么是买涨？</div>
            <div class="que_con f12">当您买涨时，价格涨了你就赚钱，跌了亏钱。</div>
        </div>
        <div class="que">
            <div class="que_title f15"><i class="inline_block ora fl"></i>什么是买跌？</div>
            <div class="que_con f12">当您买跌时，价格跌了你就赚钱，涨了亏钱。</div>
        </div>
        <div class="que">
            <div class="que_title f15"><i class="inline_block ora fl"></i>什么是止盈？</div>
            <div class="que_con f12">
                当单笔交易盈利金额触发（大于等于）指定的止盈金额时，该笔交易会被强制平仓。
                由于市场的价格实时都在变动，不保证平仓后最终盈利金额一定大于等于止盈金额，有可能小于触发的止盈金额。
            </div>
        </div>
        <div class="que">
            <div class="que_title f15"><i class="inline_block ora fl"></i>什么是止损？</div>
            <div class="que_con f12">
                当单笔交易亏损金额触发（大于等于）指定的止损金额时，该笔交易会被强制平仓。
                由于市场的价格实时都在变动，不保证卖出后最终亏损金额一定小于等于止损金额，有可能大于止损金额。
                遇到极端剧烈行情，亏损金额有可能大幅超出止损金额，超出部分由客户承担。
            </div>
        </div>
        <div class="que">
            <div class="que_title f15"><i class="inline_block ora fl"></i>什么是持仓时间？</div>
            <div class="que_con f12">
                持仓时间是指交易中的期货产品该交易日的最后的持仓时间，当持仓时间到点后，持仓中的交易会被强制平仓，不保证成交价格，请务必在到期前自己选择卖出。节假日或休市随市场实际执行。
            </div>
        </div>
        <div class="que">
            <div class="que_title f15"><i class="inline_block ora fl"></i>什么是交易综合费？</div>
            <div class="que_con f12">
                期货交易的综合费由买入费用、卖出费用构成，根据不同的交易品种，单笔买卖费用有一定的差异。
            </div>
        </div>
    </div>
    <div class="detail_datas"></div>
</div>

<div class="foot w100" style="position: fixed;bottom: 0px;left: 0px;" id="mai">
    <div class="w20 fl bgcolor_gre h100">
        <div class="fast_buy bgBox"></div>
        <div class="f10 tc c_f" id="anniu1">闪电交易</div>
    </div>
    <div class="w40 fl buy_btn tc bgcolor_red f18" id="maiz">买涨</div>
    <div class="w40 fl buy_btn tc bgcolor_blu f18" id="maid">买跌</div>
</div>

<div class="foot w100" style="position: fixed;bottom: 0px;left: 0px;display:none;" id="shanmai">
    <div class="w20 fl bgcolor_gre h100">
        <div class="iconfocus bgBox"></div>
        <div class="f10 tc c_y" id="anniu2">闪电交易</div>
    </div>
    <div class="w40 fl buy_btn tc bgcolor_red f18" onclick="location.href='/trade/order_list';">闪电买涨</div>
    <div class="w40 fl buy_btn tc bgcolor_blu f18" onclick="location.href='/trade/order_list';">闪电买跌</div>
</div>

<!--购买 涨 弹出框-->
<div class="order w100 color666 borderbox" id="yincang1">
    <h2 class="guanbi" id="guanbi1">x</h2>
    <div class="pro_item f10 borderbox">
        <div>14:29自动平仓，涨10个点，赚10港币</div>
        <div class="mt5">当前汇率：${rule.exchangerate}</div>
    </div>

    <div class="pro_price f12 borderbox">
        <div>开仓价<span class="inline_block chengse fr">${pro_data.open}</span></div>
    </div>
    <div class="pro_count">
        <div class="order_count hidden mb15">
            <div class="w30 fl">交易数量</div>
            <div class="w70 fl hidden tc">
                <div class="count_btn ml10 fr">10手</div>
                <div class="count_btn ml10 fr">5手</div>
                <div class="count_btn ml10 fr">3手</div>
                <div class="count_btn ml10 fr">2手</div>
                <div class="count_btn fr hand">1手</div>
            </div>
        </div>
        <div class="pro_point hidden f12 borderbox">
            <div class="w50 fl point_left">
                <div>触发止损点数
                    <span class="que_icon inline_block tc" id="icon1">?</span>
                    <div id="a1" class="absolute mtk">
                        <img src="../img/smschufazhisundianshu.png"/>
                        <h2 id="b1">x</h2>
                    </div>
                    <select class="choose">
                        <option value="volvo">10</option>
                        <option value="saab">20</option>
                        <option value="opel">30</option>
                    </select>
                </div>
                <div>触发止盈点数
                    <span class="que_icon inline_block tc" id="icon2">?</span>
                    <div id="a2" class="absolute mtk">
                        <img src="../img/wenhao2@2x.png"/>
                        <h2 id="b2">x</h2>
                    </div>
                    <span class="set_po inline_block">
									<input class="point_input" type="number" maxlength="2"/>
								</span>
                </div>
            </div>
            <div class="w50 fl borderbox point_right">
                <div>触发止损金额
                    <span class="que_icon inline_block tc" id="icon3">?</span>
                    <div id="a3" class="absolute mtk">
                        <img src="../img/wsmszzhisundianshu.png"/>
                        <h2 id="b3">x</h2>
                    </div>
                    <span class="colorGreen f12">-270.0</span>
                </div>
                <div>触发止盈金额
                    <span class="que_icon inline_block tc" id="icon4">?</span>
                    <div id="a4" class="absolute mtk">
                        <img src="../img/wenhao3@2x.png"/>
                        <h2 id="b4">x</h2>
                    </div>
                    <span class="set_po inline_block">
									<input class="point_input" type="number" maxlength="2"/>
								</span>
                </div>
            </div>
        </div>
        <div class="foc">
            <label><input type="radio" name="66">触发止盈</label>
            <label><input type="radio" name="66">不触发止盈</label>
        </div>
        <div class="cover">
            <span class="foc_choose inline_block tc">√</span>
            <span class="inline_block">移动保本</span>
            <span class="que_icon inline_block tc" id="icon5">?</span>
            <div id="a5" class="absolute mtk">
                <img src="../img/wenhao4@2x.png"/>
                <h2 id="b5">x</h2>
            </div>
            <div class="fr">
                <span class="inline_block">移动点数</span>
                <span class="set_po inline_block mr10">
							<input class="point_input" type="number" maxlength="2"/>
						</span>
                <span class="inline_block">保本点数</span>
                <span class="set_po inline_block">
							<input class="point_input" type="number" maxlength="2"/>
                </span>
            </div>
        </div>
        <form id="zhang" action="/trade/topay" method="post">
            <input type="hidden" name="name" value="充值">
            <input type="hidden" name="money" value="100">
            <input type="hidden" name="ip" value="127.0.0.1">
        </form>
        <div class="balance">
            <span class="inline_block mr10">当前余额</span>
            <span class="f12 colororange">${user.balance}元</span>
            <span class="inline_block fr recharge f12" onclick="document.getElementById('zhang').submit();">去充值</span>
        </div>
        <div class="total f12">
        <#--<input type="hidden" id="sum" value="">-->
            <span>交易费用${rule.comprehensivefee}+保证金${rule.performancebond}=</span>
            <span class="colorred">合计<#--${rule.comprehensivefee + rule.performancebond}-->3150</span>
            <div class="btnBox mt30">
                <div class="bgchengse color_ef br5 tc" id="isok" num="3150"
                     onclick="location.href = '/trade/order_list';">确定买涨
                </div>
            </div>
        </div>
    </div>
</div>
<!--购买 跌 弹出框-->
<div class="order w100 color666 borderbox" id="yincang2">
    <h2 class="guanbi" id="guanbi2">x</h2>
    <div class="pro_item f10 borderbox">
        <div>14:29自动平仓，涨10个点，赚10港币</div>
        <div class="mt5">当前汇率：${rule.exchangerate}</div>
    </div>

    <div class="pro_price f12 borderbox">
        <div>开仓价<span class="inline_block chengse fr">${pro_data.open}</span></div>
    </div>
    <div class="pro_count">
        <div class="order_count hidden mb15">
            <div class="w30 fl">交易数量</div>
            <div class="w70 fl hidden tc">
                <div class="count_btn ml10 fr">10手</div>
                <div class="count_btn ml10 fr">5手</div>
                <div class="count_btn ml10 fr">3手</div>
                <div class="count_btn ml10 fr">2手</div>
                <div class="count_btn fr hand">1手</div>
            </div>
        </div>
        <div class="pro_point hidden f12 borderbox">
            <div class="w50 fl point_left">
                <div>触发止损点数
                    <span class="que_icon inline_block tc" id="icon1">?</span>
                    <div id="a1" class="absolute mtk">
                        <img src="../img/smschufazhisundianshu.png"/>
                        <h2 id="b1">x</h2>
                    </div>
                    <select class="choose">
                        <option value="volvo">10</option>
                        <option value="saab">20</option>
                        <option value="opel">30</option>
                    </select>
                </div>
                <div>触发止盈点数
                    <span class="que_icon inline_block tc" id="icon2">?</span>
                    <div id="a2" class="absolute mtk">
                        <img src="../img/wenhao2@2x.png"/>
                        <h2 id="b2">x</h2>
                    </div>
                    <span class="set_po inline_block">
									<input class="point_input" type="number" maxlength="2"/>
								</span>
                </div>
            </div>
            <div class="w50 fl borderbox point_right">
                <div>触发止损金额
                    <span class="que_icon inline_block tc" id="icon3">?</span>
                    <div id="a3" class="absolute mtk">
                        <img src="../img/wsmszzhisundianshu.png"/>
                        <h2 id="b3">x</h2>
                    </div>
                    <span class="colorGreen f12">-270.0</span>
                </div>
                <div>触发止盈金额
                    <span class="que_icon inline_block tc" id="icon4">?</span>
                    <div id="a4" class="absolute mtk">
                        <img src="../img/wenhao3@2x.png"/>
                        <h2 id="b4">x</h2>
                    </div>
                    <span class="set_po inline_block">
									<input class="point_input" type="number" maxlength="2"/>
								</span>
                </div>
            </div>
        </div>
        <div class="foc">
            <label><input type="radio" name="66">触发止损</label>
            <label><input type="radio" name="66">不触发止损</label>
        </div>
        <div class="cover">
            <span class="foc_choose inline_block tc">√</span>
            <span class="inline_block">移动保本</span>
            <span class="que_icon inline_block tc" id="icon5">?</span>
            <div id="a5" class="absolute mtk">
                <img src="../img/wenhao4@2x.png"/>
                <h2 id="b5">x</h2>
            </div>
            <span class="inline_block">移动点数</span>
            <span class="set_po inline_block mr10">
							<input class="point_input" type="number" maxlength="2"/>
						</span>
            <span class="inline_block">保本点数</span>
            <span class="set_po inline_block">
							<input class="point_input" type="number" maxlength="2"/>
						</span>
        </div>
        <div class="balance">
            <span class="inline_block mr10">当前余额</span>
            <span class="f12 colororange">${user.balance}元</span>
            <span class="inline_block fr recharge f12">去充值</span>
        </div>
        <div class="total f12">
            <span>交易费用${rule.comprehensivefee}+保证金${rule.performancebond}=</span>
            <span class="colorred">合计${rule.comprehensivefee+rule.performancebond}</span>
            <div class="btnBox mt30">
                <div class="bgchengse color_ef br5 tc" onclick="location.href = '/trade/order_list';">确定买跌</div>
            </div>
        </div>
    </div>
</div>


<script type="text/javascript" src="../js/plugin/hammer.min.js"></script>
<script type="text/javascript" src="../js/plugin/trade-chart.1.0.0B1-201805051710.min.js"></script>
<script type="text/javascript" src="../js/main/trade-chart/util.js"></script>
<script type="text/javascript" src="../js/main/trade-chart/define.chartState.js"></script>
<script type="text/javascript" src="../js/main/trade-chart/define.trendChartDataManager.js"></script>
<script type="text/javascript" src="../js/main/trade-chart/define.trendChart.js"></script>
<script type="text/javascript" src="../js/main/trade-chart/define.kChartDataManager.js"></script>
<script type="text/javascript" src="../js/main/trade-chart/define.kChart.js"></script>
<script type="text/javascript" src="../js/main/trade-chart/init.js"></script>
<script type="text/javascript" src="../js/main/trade-chart/action.trendChart.view-detail.js"></script>
<script type="text/javascript" src="../js/main/trade-chart/action.kChart.view-detail.js"></script>
<script type="text/javascript" src="../js/main/trade-chart/action.js"></script>
<script type="text/javascript" src=""></script>

<script src="../js/trades/jindutiao.js"></script>
<script type="text/javascript">
    ;(function () {
        Date.prototype.Format = function (fmt) {
            var o = {
                "M+": this.getMonth() + 1, //月份
                "d+": this.getDate(), //日
                "H+": this.getHours(), //24小时
                "h+": this.getHours() % 12 == 0 ? 12 : this.getHours() % 12, //12小时
                "m+": this.getMinutes(), //分
                "s+": this.getSeconds(), //秒
                "q+": Math.floor((this.getMonth() + 3) / 3), //季度
                "S": this.getMilliseconds() //毫秒
            };
            if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
            for (var k in o)
                if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
            return fmt;
        };

        var chartState = window.chartState;
        var code = $("#code").val();
        chartState.setCurrentSymbol(code);
    })();

    $("#anniu1").click(function () {
        $("#shanmai").show();
        $("#mai").hide();
    });

    $("#anniu2").click(function () {
        $("#shanmai").hide();
        $("#mai").show();
    });

    $("#maiz").click(function () {
        $("#yincang1").show();
    });
    $("#maid").click(function () {
        $("#yincang2").show();
    });
    //		叉号
    $("#guanbi1").click(function () {
        $("#yincang1").hide();
    });
    $("#guanbi2").click(function () {
        $("#yincang2").hide();
    });

    //		上左
    $("#b1").click(function () {
        $("#a1").hide();
    });

    $("#icon1").click(function () {
        $("#a1").show();
    });


    //		上右
    $("#b2").click(function () {
        $("#a2").hide();
    });

    $("#icon2").click(function () {
        $("#a2").show();
    });


    //		下左
    $("#b3").click(function () {
        $("#a3").hide();
    });

    $("#icon3").click(function () {
        $("#a3").show();
    });


    //		下右
    $("#b4").click(function () {
        $("#a4").hide();
    });

    $("#icon4").click(function () {
        $("#a4").show();
    });


    //		最后一个
    $("#b5").click(function () {
        $("#a5").hide();
    });

    $("#icon5").click(function () {
        $("#a5").show();
    });

    $("#mingxi").click(function () {
        $("#guize1").hide();
        $("#mingxi1").show();
    });

    $("#guize").click(function () {
        $("#mingxi1").hide();
        $("#guize1").show();
    });
    $("#mingxi").click(function () {
        $("#mingxi").addClass("guize");
        $("#guize").removeClass("guize");
    });
    $("#guize").click(function () {
        $("#guize").addClass("guize");
        $("#mingxi").removeClass("guize");
    });

</script>
</body>
</html>